<template>
	<view class="gubiao">
		<!-- <Head></Head> -->
		<view class="text">
			资金流向
		</view>
		<view class="tubiao">
			<Tubiao></Tubiao>
		</view>
		<view class="text">
			领涨板块
		</view>
		<view class="mokuai">
			<view class="box">
				<view class="box1">
					<view class="box1-1">
						<view style="margin-top: 12rpx ;font-size: 28rpx; color: #333333;">钢铁</view>
						<view style="margin-top: 12rpx ;font-size: 36rpx; color: #ff4658;">+4.7%</view>
						<view
							style="border-radius: 10rpx; margin-top: 10rpx; text-align: center; line-height: 40rpx; color: #ff4658; font-size: 20rpx; border: 1px solid #ff4658; width: 100rpx;height: 40rpx;">
							2家涨停</view>
					</view>
					<view class="box1-1 " style="width: 60%;">
						<Tubiao1></Tubiao1>
					</view>
				</view>
				<view class="box2" style="margin-top: 5rpx;">
					新钢频道<text style="color: #ff4658;">
						+50%
					</text>
				</view>
			</view>
			<view class="box">
				<view class="box1">
					<view class="box1-1">
						<view style="margin-top: 12rpx ;font-size: 28rpx; color: #333333;">钢铁</view>
						<view style="margin-top: 12rpx ;font-size: 36rpx; color: #ff4658;">+4.7%</view>
						<view
							style="border-radius: 10rpx; margin-top: 10rpx; text-align: center; line-height: 40rpx; color: #ff4658; font-size: 20rpx; border: 1px solid #ff4658; width: 100rpx;height: 40rpx;">
							2家涨停</view>
					</view>
					<view class="box1-1 " style="width: 60%;">
						<Tubiao1></Tubiao1>
					</view>
				</view>
				<view class="box2">
					新钢频道<text style="color: #ff4658;">
						+50%
					</text>
				</view>
			</view>
		</view>
		<view class="text">
			十大活跃
		</view>
		<view class="huoyue">
			<view class="bar">
				<view :class="item.code?'items':'item' " v-for="(item,index) in list" @click="change(index)" :key="index">
					{{item.text}}</view>
				
			</view>
			<view class="tabhead">
				<view>名称</view>
				<view>买卖总额</view>
				<view>净买额</view>
				<view>涨跌幅</view>
			</view>
			<view class="tabitem">
				<view>名药康德</view>
				<view >11.56亿</view>
				<view style="color: #ff4658;">+3.74亿</view>
				<view style="color: #00aa8e;">-3.94%</view>
			</view>
			<view class="tabitem">
				<view>名药康德</view>
				<view >11.56亿</view>
				<view style="color: #ff4658;">+3.74亿</view>
				<view style="color: #00aa8e;">-3.94%</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Head from '../../components/gubiao/heads.vue'
	import Tubiao from '../../components/gubiao/tubiao.vue'
	import Tubiao1 from '../../components/gubiao/tubiaoyi.vue'
	export default {
		components: {
			Head,
			Tubiao,
			Tubiao1
		},
		data() {
			return {
				list: [{
						text: '泸股通',
						code: true
					},
					{
						text: "深股通",
						code: false
					},
					{
						text: "港股通",
						code: false
					},
				]
			}
		},
		methods: {
			change(t) {

				this.list.map((item, index) => {
					item.code = false
					if (t == index) {
						item.code = !item.code
					}
					return item
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.tabitem{
		display: flex;
		margin-top: 20rpx;
		view{
			width: 25%;
			text-align: center;
			
		}
	}
	.tabhead{
		display: flex;
		margin-top: 20rpx;
		view{
			width: 25%;
			text-align: center;
			
		}
	}
	.huoyue {
		width: 90%;
		margin: 0px auto;
		background-color: #FFFFFF;
		

		.bar {
		
			height: 70rpx;
			display: flex;

			.items {
				width: 33.33%;
				border-bottom: 2px solid #ff4658;
				text-align: center;
				line-height: 70rpx;
				color: #ff4658;
			}

			.item {
				width: 33.33%;
				border-bottom: 2px solid #cdcdcd;
				text-align: center;
				line-height: 70rpx;

			}
		}
	}

	.gubiao {
		background: #fafafa;

		.mokuai {
			width: 90%;
			margin: 0px auto;

			height: 266rpx;
			display: flex;
			justify-content: space-between;

			.box {
				background-color: #FFFFFF;
				
				width: 48%;
				border-radius: 20rpx;

				.box1 {
					height: 80%;
					
					padding: 0xp 20rpx;
					display: flex;

					.box1-1 {
						width: 40%;

						padding-left: 10rpx;

					}
				}
			}
		}

		.text {
			margin-top: 40rpx;
			margin-bottom: 24rpx;
			color: #333333;
			font-size: 36rpx;
			padding-left: 20rpx;
			font-weight: 600;
		}

		.tubiao {
			width: 90%;
			margin: 0px auto;
			border-radius: 20rpx;
			padding: 0px 20rpx;
			background-color: #FFFFFF;
		}
	}
</style>
